<template>
	<view>
		<view class="" v-if="JSON.stringify(confirm) !== '{}'">
		  <approverMsg :value="confirm"></approverMsg>			
		</view>
		<navigator class="left_box" v-if='wedding.order_id' :url="'/pages/order/detail/detail?order_id='+this.wedding.order_id">
			<text>查看定单详情</text>
		</navigator>
		<view class="hotelService">
			<view class="title">
				<text class="name">婚庆基本信息</text>
			</view>
			<view class="content">
				<view class="box" >
					<text>订单所属公司</text>
					<picker @change="chooseWedding" :disabled="isEdit" range-key="title" :range="companyList">
						<view class="choose"  v-if="companyList.length>1">
							<text :class="wedding_companyIndex!==''?'active':''">{{wedding_companyIndex===''?'请选择':companyList[wedding_companyIndex].title}}</text>
							<image v-if="wedding_companyIndex===''" src="../../../static/images/right.png" mode=""></image>
						</view>
					</picker>
					<icon class="icon" v-if="wedding_companyIndex!==''" type="clear" size="22upx" 
					 @click="deleteCompany"></icon>
				</view>
				<view class="box">
					<text>婚庆总金额</text>
					<input maxlength="-1" :disabled="isEdit" type="digit" v-model="wedding.wedding_total" placeholder="请输入" placeholder-style="color:#999999;" />
				</view>
				<view class="box" >
					<text>选择套餐</text>
					<picker @change="chooseCombo" :disabled="isEdit" range-key="title" :range="packageList">
						<view class="choose" v-if="packageList.length>1">
							<text :class="comboIndex!==''?'active':''">{{comboIndex===''?'请选择':wedding.wedding_package_text}}</text>
							<image v-if="comboIndex===''" src="../../../static/images/right.png" mode=""></image>
						</view>
					</picker>
					<icon class="icon" v-if="comboIndex!==''" type="clear" size="22upx" 
					 @click="deleteCombo"></icon>
				</view>
				<view class="box">
					<text>婚庆套餐价</text>
					<input :disabled="isEdit" type="digit" v-model="wedding.wedding_package_price" placeholder="请输入" placeholder-style="color:#999999;" />
				</view>
				<view class="box" >
					<text>选择仪式</text>
					<picker @change="chooseCeremony" :disabled="isEdit" range-key="title" :range="ritualList">
						<view class="choose"  v-if="ritualList.length>1">
							<text :class="ceremonyIndex!==''?'active':''">{{ceremonyIndex===''?"请选择":wedding.wedding_ritual_text}}</text>
							<image v-if="ceremonyIndex===''" src="../../../static/images/right.png" mode=""></image>
						</view>
					</picker>
					<icon class="icon" v-if="ceremonyIndex!==''" type="clear" size="22upx" 
					 @click="deleteCeremony"></icon>
				</view>
				<view class="box">
					<text>仪式价格</text>
					<input :disabled="isEdit" type="digit" v-model="wedding.wedding_ritual_hall" placeholder="请输入" placeholder-style="color:#999999;" />
				</view>
				<view class="box">
					<text>其他</text>
					<input :disabled="isEdit" type="text" v-model="wedding.wedding_other" placeholder="请输入" placeholder-style="color:#999999;" />
				</view>
				<view class="box" >
					<text>是否研发产品</text>
					<picker @change="chooseResearch" :disabled="isEdit" :value="researchIndex" :range="researchType">
						<view class="choose" >
							<text :class="researchIndex!==''?'active':''">{{researchIndex===''?'请选择':researchType[researchIndex]}}</text>
							<image v-if="researchIndex===''" src="../../../static/images/right.png" mode=""></image>
						</view>
					</picker>
					<icon class="icon" v-if='researchIndex!==""' type="clear" size="22upx" 
					 @click="deleteResearch"></icon>
				</view>
				<view class="box">
					<text>研发产品编号</text>
					<input :disabled="isEdit" type="text" v-model="wedding.new_product_no" placeholder="请输入" placeholder-style="color:#999999;" />
				</view>
				<view class="remark">
					<text>备注</text>
					<textarea :disabled="isEdit" type="text" v-model="wedding.wedding_remark" placeholder="请输入备注" placeholder-style="color:#999999;" />
					</view>
				</view>
			</view>
			<!-- 新版审批流程————创建  -->
			<template v-if="sequenceData.length > 0">
				<steps-create :stepList="sequenceData"></steps-create>
			</template>
			
			<!-- 老版审核流程 -->
			<template v-if="confirmList.length > 0">
				<auditProcess :value="confirmList" :btnValue="buttons" :isShowBtn="options.api?false:true" :transferForm="transferForm" @clearTransferForm="clearTransferForm" @resubmit='resubmits'></auditProcess>
			</template>
			<!-- 新版审核流程————查看 -->
			<template v-if="confirmSteps.length > 0">
				<steps-look :stepList="confirmSteps"></steps-look>
				<footer-action-btn :btnValue="buttons" :transferForm="transferForm" @clearTransferForm="clearTransferForm" :isShowBtn="options.api?false:true" @resubmit='resubmits' @transferSubmit="transferSubmit"></footer-action-btn>
			</template>	
					
			<button type="default" class="order_btn" @click="saveFn()" v-if="options.api"> 保存</button>
			<!-- <view class="btn_bottom" v-else>
				<view class="" v-for="(item,index) in buttons" :key="index" @click="editFn(item.api,item.id)">
					<text>{{item.label}}</text>
				</view>							
			</view> -->
	</view>
</template>

<script>
	
	import approverMsg from "@/component/approverMsg.vue";//审核流程
	import auditProcess from "@/component/auditProcess.vue";//审核流程
	import selectBox from "@/component/selectBox.vue"
	import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
	import navigation from "@/component/navigation.vue"
	
	import stepsLook from '@/component/steps-look/steps-look.vue' // 新版审核流程
	import footerActionBtn from '@/component/footer-action-btn/footer-action-btn.vue' // 底部操作按钮组
	import stepsCreate from '@/component/steps-create/steps-create.vue'
	import request from '@/utils/request.js';
	
	import sun from '@/utils/sun.js'
	export default {
		components: {
			navigation,
			timeSelector,
			selectBox,
			auditProcess,
			approverMsg,
			stepsCreate,
			stepsLook,
			footerActionBtn
		},
		data() {
			return {
				confirm_id:0,
				order_id: 0,
				
				isEdit:false,//是否可以编辑
				options:'',
				companyList:[],
				packageList:[],
				ritualList:[],
				wedding: {
					  wedding_total:'',
					  wedding_package_price:"",//婚庆套餐价
					  wedding_ritual_hall:"",//仪式价格
					  wedding_other:"",//其他
					  new_product_no:"",//研发产品编号
					  wedding_remark:"",//备注
					  is_new_product:'',
					  company_title:'',
					  company_id:'',
				}, // 婚庆
				wedding_companyIndex:'',
				comboIndex:'',
				ceremonyIndex:'',
				researchIndex:0,
				researchType:['否','是'],//研发产品
				confirmList:[],//
				buttons:[],//是当前审核可以有的按钮
				confirmUser:'',//审批信息
				confirm:{},//审批信息
				
				transferForm: {
					realname: '',
					user_id: ''
				},
				sequenceData:[],  // 新版审核
				confirmSteps: [], // 新版审核
			};
		},
		onLoad(options) {			
			// 添加 从订单详情页添加子项目 包含order_id
			if (options.params) {
				this.options = JSON.parse(options.params);
				this.order_id = this.options.order_id;
				this.getData(this.options) //获取picker
			}
			
			// 审核查看 lookApproval是个对象，包含的id是审核的编号，order_id要从审核详情中获取
			if (options.lookApproval) {
				this.options = JSON.parse(options.lookApproval)
				this.isEdit = true;
				//查看信息
				this.getDetail(this.options)
				this.confirm_id =this.options.id;
				// 审核流程--查看
				this.getConfirmList()
			}
			
			// 查看 从查看订单审核中进入只有id，这个id是审核的编号，order_id要从审核详情中获取
			if (options.id) {
				this.options = options;
				this.isEdit = true;
				//查看信息
				this.getDetail(this.options)
				this.confirm_id = this.options.id;
				// 审核流程--查看
				this.getConfirmList()
			}
		},
		methods:{
			//获取查看信息
			getDetail(e){
			  let that=this										
			  sun.request({
				url: '/h5/order.confirm/detail',
				showLoading: true,
				token:true,
				data:{
					id:e.id,
					type:e.user?'confirm_user':'',
				},
				success(res) {				
					if(res.code==200){			
					   that.editApi=res.data.editApi;
					   that.wedding=res.data.detail.wedding;	
					   that.confirmList=res.data.confirmList;
					   that.confirm=res.data.confirm;//代表的是当前审核的信息、					 
					   that.buttons=res.data.buttons;					   
					   
					   //判断是否可以编辑
					   that.buttons.map((item,index)=>{
						   if(item.id=='update'){
						   	  that.isEdit = false;
						   }
					   })
					   that.companyList=res.data.companyList?res.data.companyList:''
					   that.companyList.map((item,index)=>{						   
						   if(item.id==that.wedding.company_id){
							   that.wedding_companyIndex=index;
							   that.wedding.company_title=item.title
						   }
					   })
					   that.packageList=res.data.packageList?res.data.packageList:''
					   that.packageList.map((item,index)=>{						   
						   if(item.id==that.wedding.wedding_package_id){
							   that.comboIndex=index;
							   that.wedding.wedding_package_text=item.title
						   }
					   })
					   that.ritualList=res.data.ritualList?res.data.ritualList:''
					   that.ritualList.map((item,index)=>{						   
						   if(item.id==that.wedding.wedding_ritual_id){
							   that.ceremonyIndex=index;
							   that.wedding.wedding_ritual_text=item.title
						   }
					   })
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					})
				}
			  })						 
			},
			
			// 提交转交
			transferSubmit(){
				let that=this;
				sun.request({
					url: '/api/order.audit/transfer',
					showLoading: true,
					token:true,
					data:{
						id: that.confirm_id,
						user_id: that.transferForm.user_id
					},
					success(res) {
					  if(res.code==200){													
							uni.showToast({
								icon:"none",
								title:res.msg
							})		
							uni.navigateBack({})
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
			// 点击取消时清除转交人员信息
			clearTransferForm(){
				this.transferForm = {
					realname: '',
					user_id: ''
				}
			},
			
			//查看详情审核流程
			getConfirmList (){
			   let that=this
			   request.request({
					url: "/api/order.audit/getAuditResult",
					showLoading: true,
					token:true,
					data: {id: that.confirm_id},
					success(res) {
						that.confirmSteps = res.data.process
					 }
				})
			},
			//创建订单时的审核流程
			getConfirmSequence (e){
			   let that=this
			   request.request({
					url: "/api/order.audit/getAuditProcess",
					showLoading: true,
					token:true,
					data: Object.assign({order_id: that.order_id}, {audit_type: 'suborder'},{company_id: e.id}),
					success(res) {
						that.sequenceData = res.data.process
					 }
				})
			},
			
			getData(e){
			  let that=this										
			  sun.request({
				url: e.read,
				showLoading: true,
				token:true,
				data:{
					order_id:e.order_id
				},
				success(res) {				
					if(res.code==200){								 
					    that.companyList = res.data.companyList?res.data.companyList:'';						
						that.packageList=res.data.packageList?res.data.packageList:''
						that.ritualList=res.data.ritualList?res.data.ritualList:''
					    that.confirmList=res.data.confirmList?res.data.confirmList:''
					}
				},
				fail(e) {
					uni.showToast({
						icon: "none",
						title: "服务器开小差去啦~",
					})
				}
			  })
						  
			},
			//婚宴 所属公司
			chooseWedding(e){
				this.wedding_companyIndex=e.target.value
				this.wedding.company_id = this.companyList[this.wedding_companyIndex].id;
				this.wedding.company_title = this.companyList[this.wedding_companyIndex].title;				
			},
			deleteCompany(){
				this.wedding.company_id="",
				this.wedding_companyIndex=''
			},
			//选择婚庆套餐
			chooseCombo(e){
				this.comboIndex=e.target.value;
				this.wedding.wedding_package_text = this.packageList[this.comboIndex].title;
				this.wedding.wedding_package_id = this.packageList[this.comboIndex].id;
			},
			deleteCombo(){
				this.wedding.wedding_package_id="";
				this.comboIndex="";
			},
			//选择婚庆仪式
			chooseCeremony(e){
					 this.ceremonyIndex=e.target.value;
					 this.wedding.wedding_ritual_id = this.ritualList[this.ceremonyIndex].id;
					 this.wedding.wedding_ritual_text =this.ritualList[this.ceremonyIndex].title
				},
			//删除婚庆仪式
			deleteCeremony(){
				this.wedding.wedding_ritual_id=""
				this.ceremonyIndex=''; 
			},
			//选择研发产品
			chooseResearch(e){
					 this.researchIndex=e.target.value;
					 this.wedding.is_new_product = this.researchIndex					 
				},
			//删除研发产品
			deleteResearch(){
				this.researchIndex=''; //合作模式
			},
			// 编辑提交
			editFn(api,id){
				let that=this;
				sun.request({
					url: api,
					showLoading: true,
					token:true,
					data:{
						order_confirm_id:that.options.id,
						id:id?id:'',						
						wedding:that.wedding?JSON.stringify(that.wedding):'',																	
					},
					success(res) {
					  if(res.code==200){							
							uni.redirectTo({
							 	url:"/pages/order/index"	
							})
							uni.showToast({
								icon:"none",
								title:res.msg
							})										
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
			//提交审核
			saveFn(){			    
				let that=this;			
				sun.request({
					url: that.options.api,
					showLoading: true,
					token:true,
					data:{	
						order_id:that.options.order_id,						
						wedding:that.wedding?JSON.stringify(that.wedding):'',						
					},
					success(res) {
					  if(res.code==200){							
							uni.redirectTo({
							 	url:"/pages/order/index"	
							})
							uni.showToast({
								icon:"none",
								title:res.msg
							})										
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
			//底部评论按钮
			resubmits(item){				
				if(item.label=='同意'||item.label=='拒绝'||item.label=='评论'){
					this.commentFn(item)
				}else if(item.label == '转交'){
					uni.navigateTo({
						url: '../../../component/search/search?type=' + 'changeUser'
					})
				}else{
				   this.editFn(item.api,item.id)	
				}
								
			},
			// 编辑提交
			commentFn(e){
				let that=this;
				let url = '';
				if(e.label == '拒绝'){
					url = '/api/order.audit/reject';
				}else if(e.label == '同意'){
					url = '/api/order.audit/accept'
				} else {
					url = e.api;
				}
				sun.request({
					url: url,
					showLoading: true,
					token:true,
					data:{						
						id:that.confirm_id,						
						content:e.content?e.content:'',
						image:e.image?e.image:'',
					},
					success(res) {
					  if(res.code==200){													
							uni.showToast({
								icon:"none",
								title:res.msg
							})
				      that.getDetail(that.options)																	
					  }else{
							 uni.showToast({
								icon:"none",
								title:res.msg
							 })	
					  }
					}
				})
			},
		}
	}
</script>

<style lang="less">
	@import '../common.less';
</style>
